// import React, { useState } from 'react';
// import axiosInstance from '../api/axiosInstance';
// import { Button, TextField, Table, TableBody, TableCell, TableHead, TableRow, Paper } from '@mui/material';

// function Forecast() {
//   const [periods, setPeriods] = useState(4);
//   const [predictions, setPredictions] = useState([]);
//   const [modalities, setModalities] = useState([]);

//   const fetchPredictions = async (e) => {
//     try {
//       e.preventDefault();
//       const response = await axiosInstance.post('api/forecast/', {
//         periods
//       });
      
//       const { forecasts } = response.data;
      
//       const modalityList = Object.keys(forecasts[0]).filter(key => key !== 'week');
      
//       setPredictions(forecasts);
//       setModalities(modalityList);
//     } catch (error) {
//       console.error('Ошибка при прогнозировании рабочей нагрузки:', error);
//     }
//   };

//   return (
//     <Paper>
//       <form onSubmit={fetchPredictions}>
//         <TextField
//           label="Количество прогнозируемых недель"
//           type="number"
//           value={periods}
//           onChange={(e) => setPeriods(e.target.value)}
//           required
//         />
//         <Button type="submit" variant="contained" color="primary" style={{ margin: '8px' }}>
//           Прогнозировать
//         </Button>
//       </form>
//       <Table>
//         <TableHead>
//           <TableRow>
//             <TableCell>Неделя</TableCell>
//             {modalities.map((modality) => (
//               <TableCell key={modality}>{modality}</TableCell>
//             ))}
//           </TableRow>
//         </TableHead>
//         <TableBody>
//           {predictions.map((prediction, index) => (
//             <TableRow key={index}>
//               <TableCell>{prediction.week}</TableCell>
//               {modalities.map((modality) => (
//                 <TableCell key={modality}>{prediction[modality]}</TableCell>
//               ))}
//             </TableRow>
//           ))}
//         </TableBody>
//       </Table>
//     </Paper>
//   );
// }

// export default Forecast;



import React, { useState } from 'react';
import axiosInstance from '../api/axiosInstance';
import { Button, TextField, Table, TableBody, TableCell, TableHead, TableRow, Paper } from '@mui/material';

function Forecast() {
  const [periods, setPeriods] = useState(4);
  const [predictions, setPredictions] = useState([]);
  const [modalities, setModalities] = useState([]);

  const fetchPredictions = async (e) => {
    try {
      e.preventDefault();
      const response = await axiosInstance.post('api/forecast/', {
        periods
      });
      
      const { forecasts } = response.data;

      const formattedForecasts = forecasts.map((forecast, index) => ({
        week: index + 1,
        ...forecast
      }));
      
      const modalityList = Object.keys(forecasts[0]).filter(key => key !== 'Год' && key !== 'Номер недели');

      setPredictions(formattedForecasts);
      setModalities(modalityList);
    } catch (error) {
      console.error('Ошибка при прогнозировании рабочей нагрузки:', error);
    }
  };

  return (
    <Paper>
      <form onSubmit={fetchPredictions}>
        <TextField
          label="Количество прогнозируемых недель"
          type="number"
          value={periods}
          onChange={(e) => setPeriods(e.target.value)}
          required
        />
        <Button type="submit" variant="contained" color="primary" style={{ margin: '8px' }}>
          Прогнозировать
        </Button>
      </form>
      <Table>
        <TableHead>
          <TableRow>
            <TableCell>Неделя</TableCell>
            <TableCell>Денситометр</TableCell>
            <TableCell>КТ(без КУ)</TableCell>
            <TableCell>КТ с КУ 1 зона</TableCell>
            <TableCell>КТ с КУ 2 и более зон</TableCell>
            <TableCell>ММГ</TableCell>
            <TableCell>МРТ (без КУ)</TableCell>
            <TableCell>МРТ с КУ 1 зона</TableCell>
            <TableCell>МРТ с КУ 2 и более зон</TableCell>
            <TableCell>РГ</TableCell>
            <TableCell>Флюорограф</TableCell>
            {/* {modalities.map((modality) => (
              <TableCell key={modality}>{modality}</TableCell>
            ))} */}
          </TableRow>
        </TableHead>
        <TableBody>
          {predictions.map((prediction, index) => (
            <TableRow key={index}>
              <TableCell>{prediction['Номер недели']}</TableCell>
              {modalities.map((modality) => (
                <TableCell key={modality}>{prediction[modality]}</TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </Paper>
  );
}

export default Forecast;
